<template>
  <div class="echartsBox">
    <div v-if="JSON.stringify(obj) !== '{}'" id="checkLeftPie" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: '',
      obj: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 获取QA质量控制 */
    async getQaStatistics() {
      const res = await this.$axios.get('/board/operations/qaStatistics')
      if (res?.data.code === 200) {
        this.obj = res.data.data
        setTimeout(async () => {
          this.setCheckLeftPie(res.data.data)
        }, 500)
      }
    },
    /* QA质量控制echarts */
    setCheckLeftPie(data) {
      const option = {
        legend: {
          orient: 'vertical',
          data: ['工序检不合格数', '成品检不合格数', '采购检不合格数'],
          top: 'middle',
          right: '10px',
          width: '100px',
          textStyle: {
            fontSize: '12px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 10, // 设置图例标记的图形宽度
          itemHeight: 10 // 设置图例标记的图形高度
        },
        series: [
          {
            type: 'pie',
            radius: '75%',
            center: ['35%', '50%'],
            legendHoverLink: false,
            data: [
              {
                value: data.procedureNum,
                name: '工序检不合格数',
                itemStyle: { color: '#F79C64' },
                label: {
                  color: '#fff',
                  fontSize: '10px'
                }
              },
              {
                value: data.productNum,
                name: '成品检不合格数',
                itemStyle: { color: '#2F8BE7' },
                label: {
                  color: '#fff',
                  fontSize: '10px'
                }
              },
              {
                value: data.purchaseNum,
                name: '采购检不合格数',
                itemStyle: { color: '#2845AE' },
                label: {
                  color: '#fff',
                  fontSize: '10px'
                }
              }
            ],
            label: {
              show: true, // 显示数值
              position: 'inside', // 数值显示的位置，'outside' 表示在扇区外侧
              formatter: '{c}' // 数值的格式，{b} 是数据名，{c} 是数值，{d} 是百分比
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('checkLeftPie'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  height: calc(93% - 30px);
}
.kong {
  background-size: 50% auto;
}
</style>
